<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style type="text/css">
      .mui-bar {
        background-color: transparent;
        color: #fff;
      }

      .mui-bar-nav.mui-bar .mui-icon {
        color: #fff;
      }

      .mui-bar .icon-xiaoxi {
        position: relative;
        color: #fff;
      }

      .mui-title {
        color: #fff;
      }

      .searDiv {
        padding-top: 44px;
      }

      .header {
        width: 100%;
        height: 130px;
        position: fixed;
        top: 0;
        background: url(../img/home_bg.png) no-repeat;
        background-size: 100%;
        z-index: 111;
      }

      .search {
        background-color: #fff;
        margin-top: 10px;
        border-radius: 25px;
        overflow: hidden;
        position: relative;

      }

      .mui-content {
        /* padding-top: 110px; */
        position: absolute;
        width: 100%;
        top: 110px;
      }

      .mui-input-row .mui-btn+input,
      .mui-input-row label+input,
      .mui-input-row:last-child {
        background: #fff;
      }

      .mui-search {
        background: #fff;
        /* border-radius: 25px; */
        overflow: hidden;
        float: left;
        width: 90%;
      }

      .mui-search input {
        background-color: #fff;
        text-align: left;

        margin-bottom: 0;
        border-radius: 20px;
      }

      .mui-search .mui-placeholder {
        text-align: left;
        padding-left: 4px;
      }

      .search .code {
        width: 10%;
        background-color: #fff;
        display: inline-block;
        height: 34px;
        line-height: 34px;
        color: #333;
        font-size: 20px;
      }

      .mui-search:before {

        margin-top: -10px;

        content: '\e466';
      }

      .homeContent {
        margin-top: 20px;
      }

      /* body{
        background-color: #fbfbfb;
      } */
      #lineChart {
        width: 100%;
        height: 340px;
        background: #fff;
        /* padding: 16px 15px; */
        margin-top: 10px;
      }

      #news {
        position: relative;
      }

      #news span {
        position: absolute;
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #FF0000;
        border-radius: 4px;
        top: 10px;
        border: 0.5px solid #fff;
        right: -2px;
      }
      [v-cloak]{
                      visibility: hidden !important; /*防止被覆盖*/
                  }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="header">
        <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
          <h1 class="mui-title">一机一档</h1>
          <a class="mui-pull-right iconfont icon-xiaoxi mui-right-icon" style="font-size: 22px;" id="news"> <span v-if="mesCount!==0"></span></a>
        </header>
        <div class="searDiv" id="search">
          <div class="search margin-lr">
            <div class="mui-input-row mui-search">
              <input type="search" class="mui-input-clear" placeholder="" readonly="readonly">
            </div>
            <a href="" class="iconfont icon-saoyisao1 code"></a>
          </div>
        </div>
      </div>

      <div class="mui-content bg-white padding-bottom">

        <div class="homeContent" id="content">
          <div class="content-Title border0">
            <span class="titleB">我的任务</span>
            <span class="fr text-sm text-black" id="myMore">全部 ></span>
          </div>
          <ul class="mui-table-view commonList">
            <p v-if="myTaskList.length===0 && offlineList.length===0" class="mui-text-center">暂无数据</p>
            <li class="flex justify-between align-center" v-for="(item,index) in offlineList" @click="MyOfflineTaskDetail(item)" v-if="index<2" :key="item.id" v-cloak>
              <!-- <img src="../img/new@2x.png" alt="" class="new"> -->
              <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
                <p class="text-grey text-sm" v-cloak>{{taskType(item)}}</p>
                <p class="text-block text-df" v-cloak>{{item.targetName}}</p>
                <p class="text-grey text-sm" v-cloak><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
              </div>
              <div class="tag-sm bg-yellow text-white text-sm round">
                <span>本地任务</span>
              </div>
            </li>
            <li class="flex justify-between align-center" v-for="item in myTaskList" @click="MyTaskDetail(item)" :key="item.id" v-cloak>
              <!-- <img src="../img/new@2x.png" alt="" class="new"> -->
              <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
                <p class="text-grey text-sm" v-cloak>{{taskType(item)}}</p>
                <p class="text-block text-df" v-cloak>{{item.targetName}}</p>
                <p class="text-grey text-sm" v-cloak><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
              </div>
              <!-- <div class="tag-sm bg-blue text-white text-sm round">
                <span>模型修改</span>
              </div> -->
            </li>
          </ul>
          <div class="content-Title border0">
            <span class="titleY">我的待办</span>
            <span class="fr text-sm text-black" @click="waitMore()">全部 ></span>
          </div>
          <ul class="mui-table-view commonList">
            <p v-if="taskWaitList.length===0" class="mui-text-center">暂无数据</p>
            <li class="flex justify-between align-center" v-for="item in taskWaitList" v-else @click="toDetail(item)"  v-cloak :key="item.id">
              <!-- <img src="../img/new@2x.png" alt="" class="new"> -->
              <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
                <p class="text-grey text-sm" v-cloak>{{item.typeName}}</p>
                <p class="text-block text-df" v-cloak>{{item.targetName}}</p>
                <p class="text-grey text-sm" v-cloak><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
              </div>
              <!-- <div class="tag-sm bg-blue text-white text-sm round">
                <span>模型修改</span>
              </div> -->
            </li>
            <!-- <li class="flex justify-between align-center">
              <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
                <p class="text-grey text-sm">理想风机 模型中</p>
                <p class="text-block text-df">新增了长度属性</p>
                <p class="text-grey text-sm"><span>2020-6-22</span> <span>李工程师</span></p>
              </div>
              <div class="tag-sm bg-yellow text-white text-sm round">
                <span>本地任务</span>
              </div>
            </li> -->
          </ul>
          <ul class="mui-table-view commonList margin-top-lg">
            <li class="flex justify-between align-center">
              <div class="chart" id="lineChart"></div>
            </li>
          </ul>
        </div>
      </div>


    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../index1/js/echarts.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/sqlite.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var homeVM = null;
      var bdName = "files"; //数据库的名字
      var taskName = "offlineMytask"; //我的任务表
      mui.plusReady(function() {
        plus.nativeUI.showWaiting('加载中...');
        homeVM.load();
        homeVM.count();
        homeVM.data();
        
        if (!validBdOpen(bdName)) {
          createDb(bdName)
        }
        select();
      })
      homeVM = new Vue({
        el: "#container",
        data: {
          taskWaitList: [],
          offlineList:[],
          myTaskList: [],
          mesCount: 0,
          newData: [],
          dataName: []
        },
        created: function() {
          
        },
        methods: {
          taskType(row) {
            if (row.taskType == 2) {
              return '模型变更'
            }
          },
          load() {
            var that = this
            mui.baseApp.httpRequst("/api/task/backlog", {
              page: 0,
              size: 5,
            }, function(data) {
              that.taskWaitList = []
              that.taskWaitList = that.taskWaitList.concat(data.records)
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
            mui.baseApp.httpRequst("/api/task/me/task", {
              page: 0,
              size: 5,
              status: 1
            }, function(data) {
              that.myTaskList = []
              plus.nativeUI.closeWaiting();
              that.myTaskList = that.myTaskList.concat(data.records)
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
          },
          count() { //获取消息数量
            var that = this;
            mui.baseApp.httpRequst("/api/msgInbox/getUnreadMsgCount", {}, function(data) {
              that.mesCount = data
              console.log(JSON.stringify(data))
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
          },
          data() { //获取消息数量
            var that = this;
            mui.baseApp.httpRequst("/api/visits/queryDeptdocumentCount", {}, function(data) {
              // console.log(JSON.stringify('统计数据' + JSON.stringify(data)))
              that.newData = data.map((item, index) => {

                return item.number

              })
              data.forEach(function(item, index) {
                that.dataName.push(item.stationName);
              })
              chart();//数据表
            }, function() {
              plus.nativeUI.closeWaiting();
              console.log("获取数据失败");
            })
          },
          toDetail(item) {
            mui.openWindow({
              url: '../waitList/detail.html',
              id: '../waitList/detail.html',
              createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
              extras: {
                pageId: item.id
              }
            })
          },
          MyTaskDetail(item) {
            mui.openWindow({
              url: '../myTask/detail.html',
              id: '../myTask/detail.html',
              extras: {
                pageId: item.id,
                isDetail: 1
              }
            })
          },
          MyOfflineTaskDetail(item){
            mui.openWindow({
              url: '../help/taskDetail.html',
              id: '../help/taskDetail.html',
              createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
              extras: {
                pageId: item.id
              }
            })
          },
          project() { //所属项目
            mui.openWindow({
              url: '../file/project.html',
              id: '../file/project.html',
              createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
            })
          },
          waitMore() {
            mui.openWindow({
              url: '../waitList/home.html',
              id: '../waitList/home.html',
              extras: {}
            })
          },
          time(time) {
            var time=parseInt(time)
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          }
        }
      })
      function select() {
        selectListSQL(bdName, "select * from " + taskName + "",
          function(data) {
            console.log('查出数据表数据' + JSON.stringify(data));
            homeVM.offlineList = [];
            if (data.length > 0) {
              homeVM.offlineList = data;
            }
          })
      }
      $('#myMore').on('tap', function() {
        mui.openWindow({
          url: '../myTask/home.html',
          id: '../myTask/home.html',
          extras: {}
        })
      });
      $('#waitMore').on('tap', function() {
        mui.openWindow({
          url: '../waitList/home.html',
          id: '../waitList/home.html',
          extras: {}
        })
      });
      $('#news').on('tap', function() {
        mui.openWindow({
          url: '../news/index.html',
          id: '../news/index.html',
          extras: {}
        })
      });
      mui.back = function() {
        //显示上一个界面；  
        var self = plus.webview.currentWebview();
        var opener = self.opener();
        //继续当前页面原有返回逻辑  
        mui.fire(opener, 'back', {});
      }

      function chart() {
        var endCount=(8/homeVM.dataName.length)*100
        var myChart = echarts.init(document.getElementById('lineChart'));
        var options = {
          title: {
            text: '',
            subtext: '档案总数（个）'
          },
          tooltip: {
            // trigger: 'axis'
          },
          calculable: true,
          legend: {
            // data: ['一模', '二模', '三模']
          },
          toolbox: {
            show: false,
            feature: {
              dataView: {
                show: false,
                readOnly: false
              },
              magicType: {
                show: false,
                type: ['line', 'bar']
              },
              restore: {
                show: false
              },
              saveAsImage: {
                show: false
              }
            }
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            data: homeVM.dataName,
            axisLabel: {
              interval: 0, //横轴信息全部显示
              rotate: -30, //-30度角倾斜显示
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          dataZoom: {
            orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
            start: 0,
            end: endCount,
            // 'horizontal' ¦ 'vertical'
            // x: {number},              // 水平安放位置，默认为根据grid参数适配，可选为：
            // {number}（x坐标，单位px）
            // y: {number},              // 垂直安放位置，默认为根据grid参数适配，可选为：
            // {number}（y坐标，单位px）
            // width: {number},           // 指定宽度，横向布局时默认为根据grid参数适配
            // height: {number},          // 指定高度，纵向布局时默认为根据grid参数适配
            backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
            dataBackgroundColor: '#eee', // 数据背景颜色
            fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
            handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
          },
          series: [{
            name: '',
            type: 'bar',
            data: homeVM.newData,
            barWidth : 20,//柱图宽度
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                color: 'rgba(41,143,232,0.3)',
                borderColor: 'rgba(41,143,232,1)',
                borderWidth: 1,
                lineStyle: {
                  color: 'rgba(41,143,232,1)',
                }
              }
            }
          }]
        };
        myChart.setOption(options);
      }
      window.addEventListener("update", function(e) {
        homeVM.load();
        select();
        var page = plus.webview.getWebviewById('./home/work.html');
        mui.fire(page, 'update');
      });
      window.addEventListener("count", function(e) {
        homeVM.count()
      });
      
      document.getElementById("search").addEventListener('click', function() {
        //获得主页面的webview  
        var main = plus.webview.currentWebview().opener();
        //触发主页面的gohome事件  
        mui.fire(main, 'gohome');
      });
    </script>
  </body>
</html>
